<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>

    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="../css/indexStyle.css">
</head>
<style>
    a {
        text-decoration: none;
    }

    .down {
        width: 100%;
        height: 640px;
        display: flex;
        flex-direction: row;
        background-color: #f0f3ef;
    }

    .downLeft {
        width: 11.8%;
        height: 500px;
        margin-left: 180px;
        margin-top: 130px;
        background-color: white;
        display: flex;
        flex-direction: column;
    }

    .downRU {
        width: 120%;
        height: 11%;
        margin-left: -180px;
        margin-top: 30px;
        background-color: white;
    }

    .downRR{
        width: 80px;
        height: 30px;
        margin-left: 60px;
        margin-top: 30px;
        background-color: white;
    }
    .personal{
        font-size: 13px;
        font-family: 微软雅黑;
        font-weight: bolder;
        margin-top: 6px;
        margin-left: 12px;
    }
    .personal-1{
        font-size: 15px;
        font-family: 宋体;
        margin-top: 13px;
        margin-left: 15px;
    }
    .personal-2{
        font-size: 12px;
        font-family: 华文宋体;
        margin-top: 20px;
        margin-left: 15px;
    }

    .downRD {
        width: 880px;
        height: 468px;
        margin-left: 30px;
        background-color: white;
    }

    .downAddress {
        font-size: 15px;
        color: rgba(0, 0, 0, 0.7);
        font-family: 楷体;
        margin-top: 25px;
        margin-left: 30px;
    }

    .downPer {
        font-size: 17px;
        color: black;
        font-family: 楷体;
        font-weight: bolder;
        margin-top: 25px;
        margin-left: 30px;
    }
    .headPhoto{
        width: 100px;
        height: 100px;
        background-color: #00FF00;
        margin-left: 90px;
        margin-top: -12px;
    }
    .information{
        width: 200px;
        height: 25px;
        margin-top: 10px;
    }
    .information:focus{
        outline: none;
    }
    .baoCun{
        width: 60px;
        height: 28px;
        color: white;
        font-weight: bolder;
        margin-left: 88px;
        margin-top: 15px;
        background-color: #00FF00;
        border: 0px;
        border-radius: 3px;
    }
</style>
<body>
<div style="display: flex; flex-direction: column;">
    <!--    导航栏-->
    <div th:replace="~{header :: header}"></div>

    <div class="down">
        <div class="downLeft">
            <div style="margin-top: 10px; margin-left: 35px;">
                <p class="downPer">信&nbsp息</p>
            </div>
            <div style="margin-top: 8px; margin-left: 25px;">
                <a class="downAddress" th:href="@{/user/getOrder}">订单信息</a>
            </div>
            <div style="margin-top: 8px; margin-left: 25px;">
                <a class="downAddress" th:href="@{/user/getAddresses}">收货地址</a>
            </div>
            <div style="margin-top: 8px; margin-left: 25px;">
                <a class="downAddress" style="font-color: rgba(114,114,114,0.49); font-weight: bolder"
                   th:href="@{/toUserDetail}">个人信息</a>
            </div>
        </div>
        <div style="display: flex; flex-direction: column">
            <div class="downRU">
                <p class="downAddress">个人信息</p>
            </div>
            <div class="downRR">
                <p class="personal">个人资料</p>
            </div>
            <div class="downRD">
                <p class="personal-1">基本信息</p>
                <div style="width: 100%; height: 2px; background-color: #f0f3ef;"></div>

                    <p class="personal-1">亲爱的<span style="font-weight: bolder;" th:text="${personal.getUser().getUsername()}">{获取登录用户名}</span>，填写真实的资料，有助于好友找到你哦。</p>
                    <span class="personal-2">当前头像：</span>
                    <div class="headPhoto">
                        <a href="#">
                            <img th:src="${personal.getUserDetail().getUserImage()}" width="100%" height="100%">
                        </a>
                    </div>
                <div>
                    <form th:action="@{/addHeadPhoto}" method="post" enctype="multipart/form-data" accept=".gif, .jpg, .png">
                    <input type="file" name="file" value="选择图片">
                    <input type="submit" value="提交">
                    </form>
                </div>
                <form th:action="@{/modGender}" style="margin-left: 30px; margin-top: 10px;">
                    <span class="personal-2">性别：</span>
                    <input type="radio" style="margin-left: 32px; margin-top: 30px;" name="gender" th:checked="${personal.getUserDetail().getUserGender() eq '男'}" value="男"><span class="personal-2">男</span>
                    <input type="radio" style="margin-left: 32px" name="gender" th:checked="${personal.getUserDetail().getUserGender() eq '女'}" value="女"><span class="personal-2">女</span><br>
                    <div style="width: 95%; height: 2px; background-color: #f0f3ef; margin-left: 14px; margin-top: 10px;"></div>
                    <input class="baoCun" type="submit" value="保  存">
                </form>
            </div>
        </div>

    </div>
</div>
</body>
</html>
